<template>
  <!-- 消息详情 -->
  <el-dialog title="消息详情" class="dialogStyleSmall" :visible.sync="dialogVisible">
    <el-form v-if="dialogVisible" ref="form" :model="formData" label-width="80px">
      <el-form-item label="消息标题" prop="title">
        <el-input v-model="formData.title" readonly size="medium" placeholder="" />
      </el-form-item>
      <el-form-item label="消息类别" prop="msgType">
        <el-select
          :value="formData.msgType"
          placeholder=""
          style="width: 100%"
          readonly
          size="medium"
        >
          <el-option
            v-for="(item, index) in msgTypeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="阅读状态" prop="status">
        <el-select
          :value="formData.status"
          readonly
          style="width: 100%"
          placeholder=""
          size="medium"
        >
          <el-option
            v-for="(item, index) in statusOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="消息等级" prop="level">
        <el-select
          :value="formData.level"
          size="medium"
          style="width: 100%"
          placeholder=""
          readonly
        >
          <el-option
            v-for="(item, index) in levelOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" type="primary" @click="cancel">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'DetailDialog',
  components: {},
  data() {
    return {
      // 消息类型数组
      msgTypeOptions: [
        {
          value: '1',
          label: '新闻'
        },
        {
          value: '2',
          label: '公告'
        },
        {
          value: '3',
          label: '图片新闻'
        },
        {
          value: '4',
          label: '审批'
        },
        {
          value: '5',
          label: '审批状态'
        }
      ],
      // 消息状态数组
      statusOptions: [
        {
          value: '0',
          label: '未读'
        },
        {
          value: '1',
          label: '已读'
        },
        {
          value: '2',
          label: '已审批'
        }
      ],
      // 消息等级数组
      levelOptions: [
        {
          value: '0',
          label: '一般'
        },
        {
          value: '1',
          label: '重要'
        }
      ],
      /* 表单 start */
      dialogVisible: false, // 弹框显隐
      dialogTitle: '消息详情', // 弹框标题
      formData: {
        id: '',
        status: '',
        level: '',
        title: '',
        msgType: ''
      }
      /* 表单 end */
    }
  },
  methods: {
    /* 详情 start */
    /* 弹框初始化 */
    handleAdd(row) {
      this.dialogVisible = true
      this.formData = { ...row }
    },
    // 关闭
    cancel() {
      this.dialogVisible = false
    },
    // 打开
    submitForm() {
      this.dialogVisible = false
    }
    /* 详情 end */
  }
}
</script>

